<template>
  <div class="published">
    <el-container class="published-box">
      <div class="published-header">已发文</div>
      <!-- <div>{{ publishedList }}</div> -->
      <div class="published-cont">
        <!-- 按钮 -->
        <div class="published-btnAll">
          <!-- <el-checkbox :value="isAllSelected" @change="toggleAllSend"></el-checkbox> -->
          <div class="published-btn">
            <el-button type="danger" @click="toggleAllSend">删除</el-button>
            <el-button type="success">转发</el-button>
          </div>
        </div>
        <!-- 表格和分页 -->
        <el-container class="published-height" style="max-height: 740px;height: 740px;overflow: hidden;">
          <!-- 表头 -->
          <el-table :data="publishedList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="接收人" prop="createUser"></el-table-column>
            <el-table-column label="文件名" prop="originalName"></el-table-column>
            <el-table-column label="文件大小" prop="fileSize">
              <template slot-scope="scope">
                {{ formatFileSize(scope.row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime">
              <template slot-scope="scope">
                {{ formatDate(scope.row.updateTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click.prevent="openPost(scope.row)">详情</el-button>
                <el-button type="primary">转发</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
        </el-container>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          :total="publishedList.length" layout="total, prev, pager, next, jumper"
          style="margin-left: 20px;text-align: center;"></el-pagination>
      </div>

    </el-container>

  </div>
</template>

<script>
export default {
  name: 'publishedView',
  data () {
    return {
      selectedPublished: [], // 选中的城市
      isAllSelected: false, // 控制全选框的状态
      currentPage: 1,    // 当前页
      pageSize: 12,      // 每页显示的条数
    }
  },
  computed: {
    publishedList () {
      return this.$store.getters['publishedList'];
    },
  },
  methods: {
    // 详情
    openPost (sendItem) {
      // console.log(sendItem);
      this.$store.dispatch('updateSendItem', sendItem);
      this.$router.push({ path: '/home/postDetails' });
    },
    // 分页
    handleCurrentChange (page) {
      this.currentPage = page;
    },
    // 格式化文件大小（这里依然是文件大小格式化）
    formatFileSize (size) {
      if (size < 1024) return `${size} B`;
      else if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
      else if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
      else return `${(size / 1073741824).toFixed(2)} GB`;
    },
    // 格式化时间
    formatDate (date) {
      return new Date(date).toLocaleString();
    },
    // 处理全选框的变化
    toggleAllSend () {
      console.log(this.selectedPublished);
    },
    handleSelectionChange (val) {
      this.selectedPublished = val;
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-button {
  padding: 8px 30px !important;
}

::v-deep .el-container {
  overflow: hidden;
  /* 防止父容器显示默认滚动条 */
}

.published-list-items {
  flex: 1;
  // background: #F8F8F8;
  // margin: 0 3px;
}

.checked-item {
  background-color: #f7fdb19c;
  /* 选中后的背景颜色 */
  // border: 1px solid #67C23A;  /* 可选的边框颜色 */
  color: #fff;
  /* 文字颜色 */
}

.checked-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.checked-item .checkbox-content .file-name,
.checked-item .checkbox-content .file-size,
.checked-item .checkbox-content .file-time {
  color: #333;
  /* 文字颜色，确保选中后文字也改变 */
}

.published {
  width: 100%;
}

.published-box {
  display: flex;
  flex-direction: column;

  .published-header {
    padding: 3px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-color: white;
    border-bottom: 1px #ddd solid;
  }

  .friend-detail {
    display: flex;
    padding: 50px 80px 20px 80px;
    text-align: center;


    .info-item {
      margin-left: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      border: 1px #ddd solid;
    }

    .description {
      padding: 20px 20px 0px 20px;
    }
  }

  .frient-btn-group {
    text-align: left !important;
    padding: 20px;
  }
}

.published-cont {
  display: flex;
  flex-direction: column;
  // padding-left: 20px;
  overflow: hidden;

  .published-btnAll {
    display: flex;
    padding: 20px 0;
    align-items: center;
    border-bottom: 1px #ddd solid;

    .published-height {
      height: 100%;
      overflow: auto;
    }

    .published-btn {
      margin-left: 15px;
    }

    // 

  }

  ::v-deep .el-checkbox {
    padding-left: 20px;
  }

  .published-checkbox {
    display: flex;
    flex-direction: column;

    img {
      width: 25px;
      height: 25px;
      margin: 0 100px;
    }

    ::v-deep .el-checkbox {
      display: flex;
      border-bottom: 1px #ddd solid;
      margin-right: 0;
    }

    .checkbox-content {
      display: flex;
      align-items: center;
      text-align: center;

      .file-name {
        margin: 0 50px;
        width: 100px;
        font-weight: bold;
      }

      .file-size {
        margin-left: 10px;
        width: 400px;
        color: #888;
      }


      .el-icon-document {
        font-size: 18px;
        color: #1890ff;
      }
    }

    ::v-deep .el-checkbox__label {
      display: flex;
      width: 100% !important;
      height: 70px;
      font-size: 17px;
    }

  }
}
</style>